<template>
  <!-- 表单部分 -->
  <el-form inline>
    <el-form-item label="订单id：">
      <el-input v-model="queryForm.id" clearable />
    </el-form-item>
    <el-form-item label="用户id：">
      <el-input v-model="queryForm.userId" clearable />
    </el-form-item>
    <el-form-item label="订单状态：">
      <el-input v-model="queryForm.orderState" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getOrderPage">
        <el-icon>
          <Search />
        </el-icon>搜索
      </el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="danger" @click="deleBatch">批量删除</el-button>
    </el-form-item>
  </el-form>

  <!-- 表格展示 -->
  <el-table ref="tableRef" v-loading="loading" :data="orderList" style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column type="index" label="序号" width="100" />
    <el-table-column prop="id" label="订单id" />
    <el-table-column prop="userId" label="用户id" />
    <el-table-column prop="createTime" label="创建时间" />
    <el-table-column prop="payType" label="支付方式" />
    <el-table-column prop="orderState" label="状态" :formatter="orderStateFormatter" />
    <el-table-column prop="totalMoney" label="金额合计" />
    <el-table-column label="操作" width="300">
      <template #default="{ row }">
        <el-button type="primary" @click="getOrderDetail(row)">
          订单详情
        </el-button>
        <el-button v-if="row.orderState === 1" type="primary" @click="handleShipOrder(row.id)">
          发货
        </el-button>
        <el-button v-if="row.orderState === 2" type="primary" @click="handleTransportOrder(row.id)">
          运输
        </el-button>
        <el-popconfirm title="确认取消吗?" confirm-button-text="确认" cancel-button-text="取消" @confirm="handleCancelOrder(row.id)">
          <template #reference>
            <el-button  v-if="row.orderState === 6" type="danger">
              取消
            </el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
    <template #empty>
      <el-empty description="没有数据"></el-empty>
    </template>
  </el-table>

  <!-- 分页 -->
  <el-pagination v-model:current-page="queryForm.page" v-model:page-size="queryForm.pageSize"
    :page-sizes="[2, 5, 10, 20]" :background="true" layout="jumper, total, sizes, prev, pager, next" :total="total"
    @size-change="getOrderPage" @current-change="getOrderPage" />

  <OrderDrawer ref="drawer" />
</template>

<script setup>
// 引入依赖
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getOrderPageAPI, deleOrderAPI, shipOrderAPI, transportOrderAPI, cancelOrderAPI } from "@/apis/order.js";
import OrderDrawer from "./components/OrderDrawer.vue";

// 定义响应式数据
const queryForm = ref({
  page: 1,
  pageSize: 10,
  id: "",
  userId: "",
  orderState: "",
});

const orderList = ref([]);
const loading = ref(false);
const total = ref(0);
const drawer = ref(null);
const tableRef = ref(null);

// 获取订单分页数据
const getOrderPage = async () => {
  loading.value = true;
  const res = await getOrderPageAPI(queryForm.value);
  orderList.value = res.data.records;
  total.value = res.data.total;
  loading.value = false;
};

// 查看订单详情
const getOrderDetail = (row) => {
  drawer.value.open(row);
};

// 删除单个订单
const deleOrder = async (id) => {
  const res = await deleOrderAPI(id);
  if (res.code === 1) {
    ElMessage.success("删除成功");
    getOrderPage();
  }
};

// 批量删除订单
const deleBatch = () => {
  const selectedRows = tableRef.value.getSelectionRows();
  if (selectedRows.length == 0) {
    ElMessage.warning("没有选中的订单");
  } else {
    const selectedIds = selectedRows.map((row) => row.id).join(",");
    deleOrder(selectedIds);
  }
};

// 发货操作
const handleShipOrder = async (id) => {
  const res = await shipOrderAPI(id);
  if (res.code === 1) {
    ElMessage.success("发货成功");
    getOrderPage();
  }
};

// 运输操作
const handleTransportOrder = async (id) => {
  const res = await transportOrderAPI(id);
  if (res.code === 1) {
    ElMessage.success("订单运输中");
    getOrderPage();
  }
};

// 取消订单
const handleCancelOrder = async (id) => {
  const res = await cancelOrderAPI(id);
  if (res.code === 1) {
    ElMessage.success("取消成功");
    getOrderPage();
  }
};

// 订单状态格式化
const orderStateFormatter = (row, column, cellValue) => {
  switch (cellValue) {
    case 0:
      return '未支付';
    case 1:
      return '已支付';
    case 2:
      return '已发货';
    case 3:
      return '运输中';
    case 4:
      return '已收货';
    case 5:
      return '已完成';
    case 6:
      return '取消中';
    case 7:
      return '已取消';
    default:
      return '未知状态';
  }
};

// 生命周期钩子
onMounted(() => {
  getOrderPage();
});
</script>